<template>
	<view class="box padding-b-30">
		<view class="index-bg">
			<image :src="BASE_URL+'/uploads/20250801/81c71ccd2929b24949a3f400448e0a6f.png'" mode="widthFix"></image>
			<view class="index-text">
				<text>免费</text>
				<text>分诊预约</text>
			</view>
		</view>
		<view class="z-1">
			<u-navbar :titleStyle='{"color":"#Fff"}' leftIconColor='#fff' title="  " bgColor="transparent"
				@rightClick="rightClick" :autoBack="true"> </u-navbar>
		</view>
		<view class="content-box padding-l-r-30">
			<view class="list-box">
				<text>选择科室</text>
				<view class="input-box" @click="show = true">
					<input type="text" v-model="form.keshi" disabled placeholder="请选择">
					<image src="/static/image/triage/down.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list-box">
				<text>患者姓名</text>
				<view class="input-box">
					<input type="text" v-model="form.sick_name" placeholder="请填写患者姓名">
				</view>
			</view>
            <view class="list-box">
                <text>患者性别</text>
                <view class="input-box" @click="sexShow= true">
                    <input type="text" v-model=" gender" disabled placeholder="请选择">
                    <image src="/static/image/triage/down.png" mode="widthFix"></image>
                </view>
            </view>
			<view class="list-box">
				<text>患者年龄</text>
				<view class="input-box">
					<input type="number" v-model="form.sick_age" placeholder="请填写患者年龄">
				</view>
			</view>
			<view class="list-box">
				<text>联系方式</text>
				<view class="input-box">
					<input type="number" v-model="form.sick_contact" placeholder="请填写联系方式">
				</view>
			</view>
			<view class="list-box">
				<text>现病史</text>
				<view class="input-box">
					<input type="text" v-model="form.sick_bingshi" placeholder="请填写现病史">
				</view>
			</view>
			<view class="list-btn" @click="reservation">
				立即预约
			</view>
		</view>
		<u-picker :show="show" :columns="columns" keyName="label" @confirm="confirm" @cancel='show = false'></u-picker>
		<toastTip ref="toastTip" @btnClick='btnClick' />
        <u-picker :show="sexShow " :columns="sexColumns" @confirm="sexConfirm" @cancel='sexShow = false'></u-picker>
	</view>
</template>

<script>
	import toastTip from "../../components/toast/index.vue"
    import  {freeTriage} from '@/api/basicHealth'
    import $baseUrl from "@/config/index.js"
    const BASE_URL = $baseUrl.baseUrl
	export default {
		components: {
			toastTip
		},
		data() {
			return {
                BASE_URL,
				show: false,
				columns: [
					[{
						label: '外科',
						id: 2021
					}, {
						label: '内科',
						id: 804
					}, {
						label: '耳喉鼻科',
						id: 814
					}]
				],
                sexColumns:[
                    ['女', '男']
                ],
                sexShow:false,
				form: {
					keshi: '',
					sick_name: '',
					sick_age: "",
					sick_contact: '',
                    sick_gender: '',
					sick_bingshi: ''
				},
				popupShow: false,
                gender:''
			}
		},
		methods: {
			confirm(e) {
				this.form.keshi = e.value[0].label
				// this.form.departmentId = e.value[0].id
				this.show = false
			},
            sexConfirm(e){
                this.gender = e.value[0]
                this.sexShow = false
                if (e.value[0]=='女'){
                    this.form.sick_gender =  0
                }else{
                    this.form.sick_gender =  1
                }
            },
			rightClick() {
				uni.navigateBack()
			},
			reservation() {
				if (!this.form.sick_name) {
					uni.showToast({
						icon: 'none',
						title: "请填写患者姓名"
					})
					return
				}
                if (!this.form.keshi) {
                    uni.showToast({
                        icon: 'none',
                        title: "请选择科室"
                    })
                    return
                }
                freeTriage(this.form).then(res=>{
                    if (res.code == 1){
                        this.$refs.toastTip.getInfo(true, ['您的分诊预约申请已提交，稍后', '会有医生与您联系'], '我知道了')
                    }else   {
                        uni.showToast({
                            icon: 'none',
                            title: res.msg
                        })
                    }
                })

			},
			btnClick(){
				console.log(1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-bg {
		position: relative;

		.index-text {
			position: absolute;
			left: 50rpx;
			bottom: 56rpx;

			text {
				display: block;
				font-weight: bold;
				font-size: 50rpx;
				color: #FFFFFF;
			}
		}
	}

	.list-box {
		text {
			font-size: 28rpx;
			color: #000;
			line-height: 90rpx;
		}
	}

	.input-box {
		display: flex;
		align-items: center;
		height: 90rpx;
		padding: 0 20rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		border: 1px solid #DBDBDB;

		input {
			flex: 1;
		}

		image {
			width: 30rpx;
		}
	}

	.list-btn {
		height: 90rpx;
		margin-top: 68rpx;
		background: #43ABC4;
		border-radius: 14rpx;
		color: #fff;
		line-height: 90rpx;
		font-size: 28rpx;
		text-align: center;
	}
</style>